Wechat Mini | Note-3

发表于

微信小程序开发 Note-3

@ 2018年8月16日 11:23:54

button

button 按钮

属性名 类型 默认值 说明 生效时机 最低版本
size String default 按钮的大小
type String default 按钮的样式类型
plain Boolean false 按钮是否镂空，背景色透明
disabled Boolean false 是否禁用
loading Boolean false 名称前是否带 loading 图标
form-type String 用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件
hover-class String button-hover 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态

checkbox & label

checkbox 多选框

checkbox-group 多项选择器，内部由多个checkbox组成；

check双标签自带label ；

属性名 类型 默认值 说明
value String <checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value
disabled Boolean false 是否禁用
checked Boolean false 当前是否选中，可用来设置默认选中
color Color checkbox的颜色，同css的color

label 标签

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件；

目前可以绑定的控件有：<button/>, <checkbox/>, <radio/>, <switch/>；

属性名 类型 说明
for String 绑定控件的 id 
1
2
3
4
5
6
7
8
9
10
<checkbox-group>
  <label wx:for="{{array}}">
    <checkbox id="{{item.id}}" value="{{item.value}}" 
    checked="{{item.checked}}" color="{{item.color}}" disabled="{{item.disabled}}">
      {{item.name}}
    </checkbox>
  </label>
</checkbox-group>

<label for="1001">测试点击</label>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Page({
  data: {
    array: [{
        id:"1001",
        name: "中国",
        value: "CHINA",
        checked: true,
        color: "red",
        disabled: false
      },
      {
        id: "1002",
        name: "美国",
        value: "USA",
        checked: false,
        color: "blue",
        disabled: false
      },
      {
        id: "1003",
        name: "俄罗斯",
        value: "RUS",
        checked: true,
        color: "pink",
        disabled: false
      }
    ]
  }
})

submit & reset

form 表单

属性名 类型 说明
report-submit Boolean 是否返回 formId 用于发送模板消息
bindsubmit EventHandle 携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
bindreset EventHandle 表单重置时会触发 reset 事件

input

input 输入框

属性名 类型 默认值 说明
value String 输入框的初始内容
type String text input 的类型
password Boolean false 是否是密码类型
placeholder String 输入框为空时占位符
placeholder-style String 指定 placeholder 的样式
placeholder-class String “input-placeholder” 指定 placeholder 的样式类
cursor-spacing Number 0 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
focus Boolean false 获取焦点
confirm-type String “done” 设置键盘右下角按钮的文字，仅在type=’text’时生效
confirm-hold Boolean false 点击键盘右下角按钮时是否保持键盘不收起
selection-start Number -1 光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end Number -1 光标结束位置，自动聚集时有效，需与selection-start搭配使用
adjust-position Boolean true 键盘弹起时，是否自动上推页面
bindinput EventHandle 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus EventHandle 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
bindblur EventHandle 输入框失去焦点时触发，event.detail = {value: value}
bindconfirm EventHandle 点击完成按钮时触发，event.detail = {value: value}

type 有效值：

值 说明
text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘

confirm-type 有效值：

值 说明
send 右下角按钮为“发送”
search 右下角按钮为“搜索”
next 右下角按钮为“下一个”
go 右下角按钮为“前往”
done 右下角按钮为“完成” 
1
2
3
4
5
6
7
8
<input value="学习小程序" maxlength='10' cursor-spacing='10' confirm-type="next" confirm-hold="true" bindinput='inputEvent' bindfocus='focusEvent' bindblur='blurEvent' bindconfirm='confirmEvent'></input>
<input value="number" type='number' focus='true' selection-start="2" selection-end="4" adjust-position="false"></input>
<input value="idcard" type='idcard'></input>
<input value="digit" type='digit'></input>
密码框：
<input value="" password="true"></input>
placeholder：
<input value="" placeholder="请输入你的用户名" placeholder-style="color:green" placeholder-class="placeholder"></input>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Page({
  inputEvent: function() {
    console.log("inputEvent");
    return "imooc";
  },
  focusEvent: function () {
    console.log("focusEvent");
  },
  blurEvent: function () {
    console.log("blurEvent");
  },
  confirmEvent: function () {
    console.log("confirmEvent");
  },
})

picker

picker 选择器

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器；

普通选择器：mode = selector
属性名 类型 默认值 说明
range Array / Object Array [] mode为 selector 或 multiSelector 时，range 有效
range-key String 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
bindcancel EventHandle 取消选择或点遮罩层收起 picker 时触发
bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value} 
1
2
3
4
5
6
7
8
<picker mode="selector" range="{{array}}">
  请选择数组
</picker>

<picker mode="selector" range="{{arrayObj}}" range-key="name"
bindcancel="cancelme" bindchange="changeme">
  <view>{{showme}}</view>
</picker>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Page({
  data:{
    array:[1,2,3,4,5,6,7,8,9,0],
    arrayObj:[
      {id:"1001",name:"jack"},
      { id: "1002", name: "tom" },
      { id: "1003", name: "mary" },
      { id: "1004", name: "bob" },
      { id: "1005", name: "peter" }
    ],
    showme:"请选择人名"
  },
  changeme:function(e){
    var index = e.detail.value;
    console.log("value is = " + index);
    var id = this.data.arrayObj[index].id;
    var name = this.data.arrayObj[index].name;
    this.setData({
      showme:id + name
    })
  },
  cancelme: function (e) {
    console.log("CANCEL");
  }
})
多列选择器：mode = multiSelector
属性名 类型 默认值 说明
range 二维Array / 二维Object Array [] mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]
range-key String 当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value}
bindcolumnchange EventHandle 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 
1
2
3
4
5
6
7
8
<view style='margin-top:150rpx;'>多列选择器</view>
<picker mode="multiSelector" range="{{arrayMulti}}">
  请选择数组
</picker>
<picker mode="multiSelector" range="{{arrayObjMulti}}" range-key="id"
bindchange="changemeMulti" bindcolumnchange="columnchange">
  <view>{{showme}}</view>
</picker>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Page({
  data:{
    arrayMulti:[
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
    ],
    arrayObjMulti:[
      [
        { id: "1001", name: "jack" },
        { id: "1002", name: "tom" },
        { id: "1003", name: "mary" },
        { id: "1004", name: "bob" },
        { id: "1005", name: "peter" }
      ], [
        { id: "1001", name: "jack" },
        { id: "1002", name: "tom" },
        { id: "1003", name: "mary" },
        { id: "1004", name: "bob" },
        { id: "1005", name: "peter" }
      ]
    ]
  },
  columnchange:function(e){
    console.log(e.detail);
  },
  changemeMulti:function(e){
    var indexs = e.detail.value;
    var arrayObjMulti = this.data.arrayObjMulti;
    for (var i = 0; i < indexs.length;i++){
      var indexTmp = indexs[i];
      var id = arrayObjMulti[i][indexTmp].id;
      var name = arrayObjMulti[i][indexTmp].name;
      console.log(id + " " + name);
    }
  }
})
时间选择器：mode = time
属性名 类型 默认值 说明
value String 表示选中的时间，格式为”hh:mm”
start String 表示有效时间范围的开始，字符串格式为”hh:mm”
end String 表示有效时间范围的结束，字符串格式为”hh:mm”
日期选择器：mode = date
属性名 类型 默认值 说明
value String 0 表示选中的日期，格式为”YYYY-MM-DD”
start String 表示有效日期范围的开始，字符串格式为”YYYY-MM-DD”
end String 表示有效日期范围的结束，字符串格式为”YYYY-MM-DD”
fields String day 有效值 year,month,day，表示选择器的粒度

fields 有效值：

值 说明
year 选择器粒度为年
month 选择器粒度为月份
day 选择器粒度为天
省市区选择器：mode = region
属性名 类型 默认值 说明
value Array [] 表示选中的省市区，默认选中每一列的第一个值
custom-item String 可为每一列的顶部添加一个自定义的项 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<view style='margin-top:100rpx;'>时间选择器</view>
<picker mode="time" start="08:00" end="22:00" bindchange='changeTime'>
  <view>当前选择：{{timeLabel}}</view>
</picker>

<view style='margin-top:100rpx;'>日期选择器</view>
<picker mode="date" start="2018-03-01" end="2018-09-01" bindchange='changeDate' fields="month">
  <view>当前选择：{{dateLabel}}</view>
</picker>

<view style='margin-top:100rpx;'>城市选择器</view>
<picker mode="region" bindchange='changeCity'>
  <view>当前选择：{{cityLabel}}</view>
</picker>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Page({
  data:{
    timeLabel:"null",
    dateLabel:"null",
    cityLabel:"null"
  },
  changeTime:function(e){
    this.setData({
      timeLabel: e.detail.value
    })
  },
  changeDate: function (e) {
    this.setData({
      dateLabel: e.detail.value
    })
  },
  changeCity: function (e) {
    this.setData({
      cityLabel: e.detail.value
    })
  }
})

pricker-view

picker-view 嵌入页面的滚动选择器

picker-view-column：仅可放置于中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致；

1
2
3
4
5
6
7
8
9
10
11
12
<picker-view style='width:100;height:250rpx;' bindchange="changeme">
  <picker-view-column>
    <view wx:for="{{year}}">{{item}}</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{month}}">{{item}}</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{day}}">{{item}}</view>
  </picker-view-column>
</picker-view>
<view>"Current Value Is : "{{myvalue}}</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Page({
  data: {
    year: [1990, 1995, 2000, 2005, 2010, 2015, 2020],
    month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    day: [1, 5, 10, 15, 20, 25, 30],
    myvalue: "null"
  },
  changeme: function(e) {
    var indexs = e.detail.value;
    var year = this.data.year[indexs[0]];
    var month = this.data.month[indexs[1]];
    var day = this.data.day[indexs[2]];
    this.setData({
      myvalue: year + " Y " + month + " M " + day + " D "
    })
  }
})

radio

radio 单选项

radio-group单项选择器，内部由多个<radio/>组成；

1
2
3
4
5
<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</radio-group>
1
2
3
4
5
6
7
8
9
10
11
12
Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
    ]
  },
  radioChange: function(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
  }
})

slider

slider 滑动选择器

属性名 类型 默认值 说明
min Number 0 最小值
max Number 100 最大值
step Number 1 步长，取值必须大于 0，并且可被(max - min)整除
color Color #e9e9e9 背景条的颜色（请使用 backgroundColor）
selected-color Color #1aad19 已选择的颜色（请使用 activeColor）
activeColor Color #1aad19 已选择的颜色
backgroundColor Color #e9e9e9 背景条的颜色
block-size Number 28 滑块的大小，取值范围为 12 - 28
block-color Color #ffffff 滑块的颜色
show-value Boolean false 是否显示当前 value
bindchange EventHandle 完成一次拖动后触发的事件，event.detail = {value: value}
bindchanging EventHandle 拖动过程中触发的事件，event.detail = {value: value} 
1
2
3
4
<slider min='1' max='100'show-value="true" block-color='green' bindchanging='changing'>
</slider>
<view style='background-color:green;width:100%;height:{{myheight}};'>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
Page({
  data: {
    myheight:"500rpx" ,
    staticHeight:500
  },
  changing:function(e){
    var val = e.detail.value;
    var newHeight = this.data.staticHeight * (val / 100);
    this.setData({
      myheight:newHeight + "rpx"
    })
  }
})

swich

switch 开关选择器

属性名 类型 默认值 说明
checked Boolean false 是否选中
type String switch 样式，有效值：switch, checkbox
bindchange EventHandle checked 改变时触发 change 事件，event.detail={ value:checked}
color Color switch 的颜色，同 css 的 color 
1
2
3
4
5
<view class="body-view">
    <switch checked bindchange="switchChange"/>
    <switch checked bindchange="switchChange" type='checkbox'/>
    <switch checked bindchange="switchChange" color='red'/>
</view>
1
2
3
4
5
Page({
  switchChange: function(e) {
    console.log('switch 发生 change 事件，携带值为', e.detail.value)
  }
})

navigator 页面链接

属性名 类型 默认值 说明
target String 在哪个目标上发生跳转，默认当前小程序
url String 当前小程序内的跳转链接
open-type String navigate 跳转方式
delta Number 当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态

open-type 有效值：

值 说明
navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect 对应 wx.redirectTo 的功能
switchTab 对应 wx.switchTab 的功能
reLaunch 对应 wx.reLaunch 的功能
navigateBack 对应 wx.navigateBack 的功能
exit 退出小程序，target=”miniProgram”时生效 
1
2
3
4
5
6
7
8
9
10
11
12
13
// page1
<view>This is Page 1</view>
<navigator url='../page2/page2?id=1001&name=imooc'>跳转第2页</navigator>
<navigator url='../page3/page3'>跳转第3页</navigator>

// page2
<view>This is Page 2</view>
<navigator url='../page3/page3'>跳转第3页</navigator>
<navigator open-type='navigateBack'>返回</navigator>

// page3
<view>This is Page 3</view>
<navigator open-type='navigateBack' delta='2'>返回</navigator>
1
2
3
4
5
6
// page2
Page({
  onLoad:function(params){
    console.log(params);
  }
})

image & video

image组件默认宽度300px、高度225px；

属性名 类型 默认值 说明
src String 图片资源地址
mode String ‘scaleToFill’ 图片裁剪、缩放的模式
lazy-load Boolean false 图片懒加载。只针对page与scroll-view下的image有效
bindload HandleEvent 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’}

内网穿透

小程序不能直接访问后台接口；

通过内网穿透实现暴露到公网；

工具：ngrok（获取安全Token）；

在ngrok目录下执行cmd，完成安装；

执行命令 ngrok http 8080 暴露内网端口到公网中；复制所给的Forwarding网址，即可完成对内网的穿透；

wx.request

通过wx.request(OBJECT)实现小程序和后台API的通信；

类似与HTML中的AJAX通信；

Bug & Tip

tip: content-type 默认为 ‘application/json’;

bug: 开发者工具 0.10.102800 版本，header 的 content-type 设置异常；

OBJECT参数说明：

参数名 类型 必填 默认值 说明
url String 是 开发者服务器接口地址
data Object/String/ArrayBuffer 否 请求的参数
header Object 否 设置请求的 header，header 中不能设置 Referer。
method String 否 GET （需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType String 否 json 如果设为json，会尝试对返回的数据做一次 JSON.parse
responseType String 否 text 设置响应的数据类型。合法值：text、arraybuffer
success Function 否 收到开发者服务成功返回的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数 类型 说明
data Object/String/ArrayBuffer 开发者服务器返回的数据
statusCode Number 开发者服务器返回的 HTTP 状态码
header Object 开发者服务器返回的 HTTP Response Header 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Page({
  clickme:function(){
    wx.request({
      url: '...',
      data: {
        id:1001,
        name:"rex"
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(res.data)
      }
    })
  }
})

附录

综合练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<form bindsubmit='submitevent' style="font-size: 16px;">
  <input name="username" placeholder='输入用户名'></input>
  <input name="password" password='true' placeholder='输入密码'></input>

  <checkbox-group name="skill" style="margin-top:30rpx">选择技能
    <view wx:for="{{skills}}">
      <checkbox id="{{item.id}}" value="{{item.value}}">{{item.name}}</checkbox>
    </view>
  </checkbox-group>

  <picker name="birthday" mode="date" start="1990-01-01" end="2018-01-01" bindchange='changeDate' style='margin-top:30rpx'>
    <view>出生日期为：{{dateLabel}}</view>
  </picker>

  <picker name="city" mode="region" bindchange='changeCity' style='margin-top:30rpx'>
    <view>所在地区为：{{cityLabel}}</view>
  </picker>

  <radio-group name="sex" style='margin-top:30rpx'>
    <radio value='男' checked='true'>男性</radio>
    <radio value='女'>女性</radio>
  </radio-group>

  <view style='margin-top:30rpx'>
  请选择年龄：
  <slider name="age" value='18' min='18' max='65' show-value='true'></slider>
  </view>

  <switch name="isOK" checked='false' style='margin-top:30rpx'>
    个人资料进行保密
  </switch>

  <textarea name="remark" placeholder='备注信息' style='margin-top:30rpx;border:1px;border-style:solid;width:90%;height:150rpx;'>
  </textarea>

  <view style='margin-top:30rpx'>
    <button size='mini' form-type='submit' type='primary'>提交</button>
    <button size='mini' form-type='reset' type='warn'style='margin-left:30rpx'>提交</button>
  </view>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Page({
  data: {
    skills: [{
        id: "1001",
        name: "JAVA",
        value: "java"
      },
      {
        id: "1002",
        name: "HTML",
        value: "html"
      },
      {
        id: "1003",
        name: "SQL",
        value: "sql"
      },
      {
        id: "1004",
        name: "DATA",
        value: "data"
      },
      {
        id: "1005",
        name: "IOS",
        value: "ios"
      },
      {
        id: "1006",
        name: "ANDROID",
        value: "android"
      }
    ],
    dateLabel: "null",
    cityLabel: "null"
  },
  changeDate: function (e) {
    this.setData({
      dateLabel: e.detail.value
    })
  },
  changeCity: function (e) {
    this.setData({
      cityLabel: e.detail.value
    })
  },
  submitevent:function(e){
    console.log(e.detail.value);
  }
})

@ 2018年8月16日 16:21:10